<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .progress {
        border: solid;
        padding: 5px;
        margin: 10px;
      }
      .progress .bar {
        height: 10px;
        width: 0%;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <h1>HELLO Index</h1>

    <input type="file" id="uploadInput" />
    <button onclick="upload(document.getElementById('uploadInput'))">
      保存
    </button>
    <div class="progress">
      <div class="bar" id="progressBar"></div>
    </div>

    <script>
      function MyAxios() {}
      MyAxios.prototype.get = function (url) {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open("GET", url);
          xhr.responseType = "json";
          xhr.onload = function () {
            if (xhr.status === 200) {
              resolve({
                status: xhr.status,
                statusText: xhr.statusText,
                headers: xhr
                  .getAllResponseHeaders()
                  .split("\r\n")
                  .slice(0, -1)
                  .reduce((r, el) => {
                    const [k, v] = el.split(": ");
                    r[k] = v;
                    return r;
                  }, {}),
                data: xhr.response,
              });
            }
            if (xhr.status > 300) {
              reject(xhr.response);
            }
          };

          xhr.send();
        });
      };


      
      const request = new MyAxios();

      // request.post = function () {}; //???

      request
        .get("http://127.0.0.1:8090/api/collections/todolist/records")
        .then((data) => {
          console.log(data);
        })
        .catch((e) => {
          console.log(e);
        });
    </script>
  </body>
</html>
